<template>
    <div class="satisfyStatistics">
        <div class="header flexbetween mb20">
            <div class="flex-center">
                <span class="title">数据范围</span>
                <el-radio-group v-model="time" size="small" class="mr20" @change="radioTimeChange">
                    <el-radio-button label="0">今天</el-radio-button>
                    <el-radio-button label="1">昨天</el-radio-button>
                    <el-radio-button label="7">近一周</el-radio-button>
                    <el-radio-button label="30">近30天</el-radio-button>
                </el-radio-group>
                <el-date-picker class="mr20" v-model="date" size="small" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
                                value-format="yyyy-MM-dd" :picker-options="pickerOptions" @change="dateRangeChange">
                </el-date-picker>
                <div class="mr20">渠道入口</div>
                <a-select v-model="sourceIds" style="width: 300px" mode="multiple" @change="getData"
                          :getPopupContainer="triggerNode => { return triggerNode.parentNode }">
                    <a-select-option v-for="source in sourceList" :key="source.id" :value="source.id">
                        {{ source.sourceName }}
                    </a-select-option>
                </a-select>
            </div>
            <span class="hint">仅支持查询近90天的数据</span>
        </div>
        <div class="card mb20">
            <div class="card-header flexbetween">
                <span class="title">知识点满意度趋势图</span>
                <el-tooltip effect="light" content="下载" placement="top" :enterable="false">
                    <span class="iconfont icon-xiazai" @click="exportSatisfy('exportTrend')"></span>
                </el-tooltip>
            </div>
            <div class="card-body" style="height: 380px">
                <echarts :optionData="chartOption"></echarts>
            </div>
        </div>
        <div class="card">
            <div class="card-header flexbetween">
                <span class="title">知识点满意度明细</span>
                <el-tooltip effect="light" content="下载" placement="top" :enterable="false">
                    <span class="iconfont icon-xiazai" @click="exportSatisfy('exportQuestionDetailList')"></span>
                </el-tooltip>
            </div>
            <div class="card-body">
                <element-table :data="dataList" :columns="cloumns" :loading="tableLoading" :tableHeight="350" :pageNo="pageNo"
                               :pageSize="pageSize" :total="total" @changePageNo="changePageNo" @changePageSize="changePageSize"
                               :pagFixed="false">
                </element-table>
            </div>
        </div>

        <!-- 导出 -->
        <exportExcel ref="exportExcel"></exportExcel>
    </div>
</template>

<script>
import elementTable from "@/components/elementTable";
import echarts from "@/components/Echarts";
import exportExcel from "@/components/exportExcel";
import { getLineColumnOption } from "@/components/Echarts/option";
import { initFilterTime } from "@/utils/index";
import { mapGetters } from "vuex";
import { satisfyTrend, questionDetailList, exportSatisfy } from "@/api/robotReport";
export default {
    name: "satisfyStatistics",
    data() {
        return {
            time: "0",
            date: "",
            sourceIds: [],
            chartOption: {},
            pickerOptions: {
                disabledDate(time) {
                    let curDate = new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1;
                    let three = 90 * 24 * 3600 * 1000;
                    let threeMonths = curDate - three;
                    return time.getTime() > curDate || time.getTime() < threeMonths;;
                }
            },
            dataList: [],
            tableLoading: false,
            pageNo: 1,
            pageSize: 10,
            total: 0,
            cloumns: [
                {
                    config: {
                        label: "序号",
                        prop: "index"
                    },
                },
                {
                    config: {
                        label: "标准问",
                        prop: "question"
                    },
                },
                {
                    config: {
                        label: "所属分类",
                        prop: "className"
                    },
                },
                {
                    config: {
                        label: "访问次数",
                        prop: "hits"
                    },
                },
                {
                    config: {
                        label: "评价次数",
                        prop: "commentCount"
                    },
                },
                {
                    config: {
                        label: "未评价次数",
                        prop: "uncommentCount"
                    },
                },
                {
                    config: {
                        label: "点赞次数",
                        prop: "useFull"
                    },
                },
                {
                    config: {
                        label: "点赞率",
                    },
                    render: (h, scope) => {
                        return (<span>{scope.satisfiedRatio}%</span>)
                    }
                },
                {
                    config: {
                        label: "点踩次数",
                        prop: "useLess"
                    },
                },
            ]
        }
    },
    methods: {
        getData(falg = true) {
            if (!this.date) {
                return this.$antMessage.warning("请选择日期");
            }
            var param = {
                startDate: this.date[0],
                endDate: this.date[1],
                sourceIds: this.sourceIds
            }
            if (falg) {
                satisfyTrend(param).then(resp => {
                    if (resp.status == 0) {
                        var date = [];
                        resp.data.dateList.forEach((item) => { date.push(item.substring(5)) });
                        this.getChartData(resp.data, date);
                    } else {
                        this.$antMessage.warning(resp.message);
                    }
                });
                param.pageNo = 1;
            } else {
                param.pageNo = this.pageNo;
            }
            param.pageSize = this.pageSize;
            this.tableLoading = true;
            questionDetailList(param).then(resp => {
                this.tableLoading = false;
                if (resp.status == 0) {
                    var { list, total } = resp.data;
                    list.forEach((item, i) => { item.index = i + 1 });
                    this.dataList = list;
                    this.total = total;
                } else {
                    this.$antMessage.warning(resp.message);
                }
            });
        },
        getChartData(data = {}, dateList = []) {
            let chartOption = {
                legend: { data: ['点赞次数', '点踩次数', '未评价次数', '点赞率'] },
                xAxis: [{ data: dateList }],
                yAxis: [{ name: '次数' }, { name: '点赞率' }],
                dataZoom: [{ show: dateList.length > 31 }],
                grid: { bottom: dateList.length > 31 ? "30px" : "0%" },
                series: [
                    {
                        name: '未评价次数',
                        type: 'line',
                        color: "#FF9A84",
                        lineStyle: { width: 3 },
                        symbol: 'circle',
                        symbolSize: 10,
                        emphasis: {
                            scale: false,
                            itemStyle: {
                                borderColor: 'rgba(255, 154, 132,0.2)',
                                borderWidth: 15,
                            }
                        },
                        data: data.noCommentCountList
                    },
                    {
                        name: '点赞次数',
                        type: 'line',
                        color: "#6B5EE2",
                        lineStyle: { width: 3 },
                        symbol: 'circle',
                        symbolSize: 10,
                        emphasis: {
                            scale: false,
                            itemStyle: {
                                borderColor: 'rgba(142, 121, 255,0.2)',
                                borderWidth: 15,
                            }
                        },
                        data: data.satisfiedCountList
                    },
                    {
                        name: '点踩次数',
                        type: 'line',
                        color: "#0EB8D8",
                        lineStyle: { width: 3 },
                        symbol: 'circle',
                        symbolSize: 10,
                        emphasis: {
                            scale: false,
                            itemStyle: {
                                borderColor: 'rgba(14, 184, 216,0.2)',
                                borderWidth: 15,
                            }
                        },
                        data: data.unsatisfiedCountList
                    },
                    {
                        name: '点赞率',
                        type: 'bar',
                        color: "#537EF7",
                        yAxisIndex: 1,
                        itemStyle: {
                            borderRadius: [6, 6, 0, 0] //柱状图圆角
                        },
                        barWidth: 30,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + '%';
                            }
                        },
                        data: data.satisfiedRatioList,
                    },
                ]
            };
            this.chartOption = getLineColumnOption(chartOption);
        },
        radioTimeChange(val) {
            this.date = initFilterTime(val);
            this.getData();
        },
        dateRangeChange() {
            this.time = "";
            this.getData();
        },
        changePageSize(val) {
            this.pageSize = val;
            this.getData();
        },
        changePageNo(val) {
            this.pageNo = val;
            this.getData(false);
        },
        exportSatisfy(type) {
            if (!this.date) {
                return this.$antMessage.warning("请选择日期");
            }
            var param = {
                startDate: this.date[0],
                endDate: this.date[1],
                sourceIds: this.sourceIds
            }
            var fileName = {
                exportTrend: "知识点满意度趋势图",
                exportQuestionDetailList: "知识点满意度明细"
            }
            var url = "/v1/admin/statistic/satisfaction/" + type;
            this.$refs.exportExcel.showLoading();
            exportSatisfy(url, param).then(resp => {
                this.$refs.exportExcel.closeLoading();
                if (resp.status == 0) {
                    this.$refs.exportExcel.exports(fileName[type], resp.data);
                } else {
                    this.$antMessage.warning(resp.message);
                }
            });
        }
    },
    created() {
        this.date = initFilterTime(0);
        this.getData();
    },
    computed: {
        ...mapGetters(["sourceList"]),
    },
    components: {
        elementTable,
        echarts,
        exportExcel
    }
}
</script>

<style lang="scss">
</style>